<template>
    <div class="content-box">
        <div class="serchBox clearfix">
            <div class="rightFloat">
                 <el-form :inline="true">
                    <el-form-item label="选择月份">
                        <el-date-picker
                            v-model="value2"
                            type="month"
                            placeholder="选择月份"
                            @change="monthChoose"
                            value-format="YYYY-MM"
                        />
                    </el-form-item>
                </el-form>                
            </div>
        </div>
        <div class="toplist flex_container">
            <div class="benchCard">
                <p>
                    <span>订单流水</span>
                    <span class="rightFloat cursorPointer">
                        <el-tooltip content="订单流水=本自然月订单产生的流水数据" placement="right" effect="light">
                            <el-icon><Warning /></el-icon>
                        </el-tooltip>
                    </span>
                </p>
                <p>
                    <span class="price-box">{{toplilst.aPrice}}</span>
                </p>
                <div class="card-con">

                </div>
                <p>
                    日均订单流水 ￥{{toplilst.aPrice}}
                </p>
                    
            </div>
            <div class="benchCard">
                <p>
                    <span>实收金额</span>
                    <span class="rightFloat cursorPointer">
                        <el-tooltip content="实收金额=本自然月实收金额（不包含退款金额）" placement="right" effect="light">
                            <el-icon><Warning /></el-icon>
                        </el-tooltip>
                    </span>
                </p>
                <p>
                    <span class="price-box">{{toplilst.aPrice}}</span>
                </p>
                <div class="card-con">

                </div>
                <p>
                    日均实收 ￥{{toplilst.aPrice}}
                </p>
                    
            </div>
            <div class="benchCard">
                <p>
                    <span>订单数量</span>
                    <span class="rightFloat cursorPointer">
                        <el-tooltip content="订单数量=本自然月订单总数" placement="right" effect="light">
                            <el-icon><Warning /></el-icon>
                        </el-tooltip>
                    </span>
                </p>
                <p>
                    <span class="price-box">{{toplilst.aPrice}}</span>
                </p>
                <div class="card-con">

                </div>
                <p>
                    退单率 {{toplilst.aPrice}}
                </p>
                    
            </div>
            <div class="benchCard">
                <p>
                    <span>用户转化率</span>
                    <span class="rightFloat cursorPointer">
                        <el-tooltip content="用户转化率=本自然月下单人数/本自然月访问人数" placement="right" effect="light">
                            <el-icon><Warning /></el-icon>
                        </el-tooltip>
                    </span>
                </p>
                <p>
                    <span class="price-box">{{toplilst.aPrice}}</span>
                </p>
                <div class="card-con">

                </div>
                <p>
                    周同比 ￥{{toplilst.aPrice}}
                </p>
                    
            </div>
        </div>
        <div class="containerBox">
            <div class="topBox clearfix">
                <div class="leftTitle">
                    总订单流水
                </div>
                <div class="rightFloat">
                    <el-select v-model="dateType" placeholder="Select" style="margin-right:10px;width:100px">
                        <el-option
                            v-for="item in options"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                        />
                    </el-select>

                    <el-date-picker v-if="dateType == 'week'"
                        v-model="dateValueWeek"
                        type="week"
                        format="[Week] ww"
                        placeholder="请选择周"
                    />
                    <el-date-picker v-if="dateType == 'month'"
                        v-model="dateValueMonth"
                        type="month"
                        placeholder="请选择月份"
                    />
                    <el-date-picker v-if="dateType == 'dates'"
                        v-model="dateValueDates"
                        type="daterange"
                        range-separator="至"
                        start-placeholder="请选择开始日期"
                        end-placeholder="请选择结束日期"
                    />
                </div>
            </div>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import * as echarts from 'echarts';
const value2 = ref('');
const dateValueWeek = ref('');
const dateValueMonth = ref('');
const dateValueDates = ref('');
const dateType = ref('dates');
// 时间选择器options
const options = [
  {
    value: 'dates',
    label: '按天',
  },
  {
    value: 'week',
    label: '按周',
  },
  {
    value: 'month',
    label: '按月',
  }
]
let monthChoose = (val: any) => {
    console.log(val)

}
let toplilst = {
    aPrice: '0.00'
}
</script>

<style lang="scss" scoped>
.containerBox{
    width: calc(100% - 20px);
    box-sizing: border-box;
    margin: 10px;
    padding: 10px;
    border-radius: 4px;
    border: 1px solid #efefef;
    box-shadow: 0 0 10px #999!important;
    .leftTitle{
        font-size: 18px;
        color: #333;
        float: left;
    }
    .topBox{
        width: 100%;
        padding: 20px 10px 0;
        box-sizing: border-box;
        margin-bottom: 10px;
        border-bottom: 1px solid #efefef;
    }

}
.toplist{
    width: calc(100% - 20px);
    padding: 10px;
    margin: 0 10px;
    box-sizing: border-box;
    .benchCard{
        min-width: 400px;
        padding: 10px;
        border-radius: 4px;
        border: 1px solid #efefef;
        height: 240px;
        color: #666;
        font-size: 14px;
        p{
            margin-bottom: 10px;
        }
        .price-box{
            font-size: 36px;
            color: #333;
            letter-spacing: -1px;

        }
        .card-con{
            border-bottom: 1px solid #efefef;
            height: 110px;
            margin-bottom: 10px;
        }
    }
}
</style>